'use client';
import NavLink from '@/components/NavLink';
import Link from 'next/link';
import { useState } from 'react';

// 自定义图标组件
const MenuFoldIcon = ({ onClick }: { onClick?: () => void }) => (
  <svg 
    className="w-8 h-8 cursor-pointer" 
    fill="none" 
    stroke="currentColor" 
    viewBox="0 0 24 24"
    onClick={onClick}
  >
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
  </svg>
);

const HomeIcon = () => (
  <svg className="w-7 h-7 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </svg>
);

const LeftWebrtc = ({ hrefs }: { hrefs: { name: string; href: string }[] }) => {
	const [isOpen, setIsOpen] = useState(false);
	const closeMenu = () => {
		setIsOpen(false);
	};
	return (
		<>
			<div className="absolute top-4 left-2 sm:hidden block z-50">
				<MenuFoldIcon onClick={() => setIsOpen(!isOpen)} />
			</div>
			<aside
				className={`w-64 sm:w-72 md:w-80 bg-gray-200 sm:block transition-all duration-300 ease-in-out ${
					isOpen ? 'block absolute z-40 h-full w-3/4' : 'hidden'
				}
				`}
			>
				<ul className="p-2">
					<li className="p-2 rounded-full hover:bg-gray-300 transition-all duration-300 mb-4">
						<Link href="/home" onClick={closeMenu} className="flex items-center justify-center">
							<HomeIcon />
						</Link>
					</li>
					{hrefs.map((item) => (
						<NavLink key={item.name} href={item.href} onClick={closeMenu}>
							{item.name}
						</NavLink>
					))}
				</ul>
			</aside>
		</>
	);
};
export default LeftWebrtc;
